<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表+表单+新元素</title>
	</head>
	<body>
		<h1>列表元素：集合-一组相同数据</h1>
		<!--  第一种使用方式：无序列表  使用率高  -->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!--  第二种使用方式：有序列表  -->
		<ol>
			<li>大头儿子</li>
			<li>邋遢大王</li>
			<li>喜洋洋</li>
		</ol>
		<!--  第三种使用方式：定义列表  解释小图片  -->
		<dl>
			<dt><img src="img/1.png.png"></dt>
			<dd>这是海绵宝宝</dd>
		</dl>
		<h1>表单元素</h1>
		<!--  采集用户信息 账户登录 颜色 功能型操作-->
		<form>
		账号：<input type="text">
		密码：<input type="password">
		<button>按钮</button>
		<input type="submit">
		<input type="reset">
		男 <input type="radio" name="sex">
		女 <input type="radio" name="sex">
		肉<input type="checkbox">
		菜<input type="checkbox">
		汤<input type="checkbox">
		</form>
		<h1>新元素</h1>
		<!--记号笔元素-->
		lorem<mark>lorems</mark>
		<!--度量元素-->
		<meter value="60" max="100" min="1"></meter>
		<!--细节元素-->
		<details>
			<summary>默认显示效果</summary>
			<div>
				Lorem ipsum dolor sit, amet consectetur adipisicing elit.
				Vel nisi adipisci veniam itaque, officiis placeat ut quam 
				rerum! Quasi repellat nihil inventore illum hic temporibus
				odio omnis id tempore fuga. Lorem ipsum dolor sit amet, 
				consectetur adipisicing elit. Veritatis nihil facere ullam 
				inventore laboriosam dolorum, voluptatibus ea obcaecati corrupti 
				sapiente libero autem magni facilis adipisci animi illo odit 
				consectetur placeat. Lorem ipsum, dolor sit amet consectetur
				adipisicing elit. Amet earum, alias neque velit explicabo 
				architecto tempora, quia quaerat id error distinctio sapiente
				harum nesciunt nam a vitae accusantium nostrum? Iusto.</div>
		</details>
	</body>
</html>